---
layout: default
title: Furatto - Docs::Responsive Utilities
---

<h1>Responsive utilities</h1>

<p class="main-motto">Furatto provides class names to accelerate the mobile-friendly development, by showing or hiding the content by device managed by media queries.</p>

<hr />

<h3>Visibility class names</h3>
<p>Furatto provides some responsive utilities for you to hide or show content depending on the screen size is rendering. Credits go to <a href="http://getbootstrap.com/css/#responsive-utilities" target="_blank">Bootstrap</a>.</p>
<table class="responsive">
  <thead>
    <tr>
      <th></th>
      <th>
        <span class="muted">Width &lt; 768px</span>
      </th>
      <th>
        <span class="muted">Width &lt; 992px</span>
      </th>
      <th>
        <span class="muted">Width &lt; 1200px</span>
      </th>
      <th>
        <span class="muted">Width &gt; 1200px</span>
      </th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td><span class="code">visible-on-xsmall</span></td>
    <td class="docs-visible">Visible</td>
    <td class="docs-invisible">Hidden</td>
    <td class="docs-invisible">Hidden</td>
    <td class="docs-invisible">Hidden</td>
  </tr> 
  <tr>
    <td><span class="code">visible-on-small</span></td>
    <td class="docs-invisible">Hidden</td>
    <td class="docs-visible">Visible</td>
    <td class="docs-invisible">Hidden</td>
    <td class="docs-invisible">Hidden</td>
  </tr> 
  <tr>
    <td><span class="code">visible-on-medium</span></td>
    <td class="docs-invisible">Hidden</td>
    <td class="docs-invisible">Hidden</td>
    <td class="docs-visible">Visible</td>
    <td class="docs-invisible">Hidden</td>
  </tr> 
  <tr>
    <td><span class="code">visible-on-large</span></td>
    <td class="docs-invisible">Hidden</td>
    <td class="docs-invisible">Hidden</td>
    <td class="docs-invisible">Hidden</td>
    <td class="docs-visible">Visible</td>
  </tr> 
  <tr>
    <td><span class="code">hidden-on-xsmall</span></td>
    <td class="docs-invisible">Hidden</td>
    <td class="docs-visible">Visible</td>
    <td class="docs-visible">Visible</td>
    <td class="docs-visible">Visible</td>
  </tr> 
  <tr>
    <td><span class="code">hidden-on-small</span></td>
    <td class="docs-visible">Visible</td>
    <td class="docs-invisible">Hidden</td>
    <td class="docs-visible">Visible</td>
    <td class="docs-visible">Visible</td>
  </tr> 
  <tr>
    <td><span class="code">hidden-on-medium</span></td>
    <td class="docs-visible">Visible</td>
    <td class="docs-visible">Visible</td>
    <td class="docs-invisible">Hidden</td>
    <td class="docs-visible">Visible</td>
  </tr> 
  <tr>
    <td><span class="code">hidden-on-large</span></td>
    <td class="docs-visible">Visible</td>
    <td class="docs-visible">Visible</td>
    <td class="docs-visible">Visible</td>
    <td class="docs-invisible">Hidden</td>
  </tr> 
  </tbody>
</table>

<hr />

<h3>Orientation visibility</h3>

<p>Furatto also provides orientation visibility utilities for you to keep on going.</p>

<table class="responsive">
   <thead>
     <tr>
       <th>Name</th>
       <th>Description</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td><span class="code">show-on-portrait</span></td>
       <td>Displays the content when the device is on portrait orientation.</td>
     </tr>
     <tr>
       <td><span class="code">show-on-landscape</span></td>
       <td>Displays the content when the device is on landscape orientation.</td>
     </tr>
     <tr>
       <td><span class="code">hide-on-portrait</span></td>
       <td>Hides the content when the device is on portrait orientation.</td>
     </tr>
     <tr>
       <td><span class="code">hide-on-landscape</span></td>
       <td>Hides the content when the device is on landscape orientation.</td>
     </tr>
   </tbody>
</table>

<hr />
<h3>Available variables</h3>
<p>Feel like you need mor customization, you can override our variables to achieve it.</p>

<pre>
<code>
// General settings
$media-display: "only screen" !default;

// Responsive screen sizes
$extra-small-screen: 34.28571429rem !default;
$extra-small-screen-max: 34.21428571rem !default;
$extra-small-media: "(max-width: #{$extra-small-screen-max})" !default;

$small-screen: 54.85714286rem !default;
$small-screen-max: 54.78571429rem !default;
$small-screen-media: "(max-width: #{$small-screen-max})" !default;
$small-screen-range: "(min-width: #{$small-screen}) and (max-width: #{$small-screen-max})" !default;

$medium-screen: 70.85714286rem !default;
$medium-screen-max: 70.78571429rem !default;
$medium-screen-range: "(min-width: #{$medium-screen}) and (max-width: #{$medium-screen-max})" !default;

$large-screen: 85.71428571rem !default;
$large-screen-range: "(min-width: #{$large-screen})" !default;

// Responsive screen orientations
$portrait-media: "#{$media-display} and (orientation: portrait)" !default;
$landscape-media: "#{$media-display} and (orientation: landscape)" !default;
</code>
</pre>
